<template>
<div>
  <a-card class="skin-seting-back">
    <a-card-grid
      v-for="(item, index) in backColorLists"
      :key="index"
      :class="{'check-back': checkId === `default${index}`}"
      style="width: 50%; text-align: center;cursor: pointer;"
      @click="checkItem(item, index)"
      >
      <a-row class="backitem">
        <a-col :span="12" :style="{background: item.light.background}">
        <img src="@/assets/sun.png" alt="" srcset="">
        </a-col>
        <a-col :span="12" :style="{background: item.drak.background}">
        <img src="@/assets/moon.png" alt="" srcset="">
        </a-col>
      </a-row>
      <div class="check-back-status">
        <check-outlined />
      </div>
      </a-card-grid>
  </a-card>
</div>
</template>
<script setup lang="ts">
import { CheckOutlined } from '@ant-design/icons-vue';
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
// import backColorList from '../background'
// import { colorReverse } from '@/utils/common'
// const Color = require('color')

const store = useStore()
const themeCheckId = computed(() => store.getters['app/themeCheckId'])
const backColorLists = computed(() => store.getters['app/defaultThemeList'])
const checkBack = ref('')
const checkId = computed(() => {
  debugger
  if(themeCheckId.value !== -1) return themeCheckId.value
  return checkBack.value
})

// 选中颜色
function checkItem(item: any, index: number){
  checkBack.value = `default${index}`
  store.commit('app/setAppTheme', { id: `default${index}`, ...item })
}

</script>
<style lang="less" scoped>
.skin-seting-back{
/deep/.ant-card-body{
      height: calc(100vh - 90px);
      overflow-y: auto;
}
.ant-card-grid{
  padding: 10px;
}
.backitem{
  height: 60px;
  line-height: 60px;
  img{
    width: 20px;
  }
}
.check-back-status{
  display: none;
}
.check-back{
  position: relative;
  .check-back-status{
    display: inline-block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0,0,0,.5);
    z-index: 10;
    .anticon-check{
      color: #52c41a;
      font-size: 34px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    // #52c41a
  }
}
}

</style>